<template>
  <!-- 资讯分类管理 -->
  <div>
    <!-- 头部内容 -->
    <div class="header">
      <el-button type="primary" @click="addCategory">新 增</el-button>
    </div>
    <!-- 中间内容 -->
    <div class="main-content">
      <el-table :data="allCategoryData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" />

        <!-- 名称 -->
        <el-table-column prop="name" label="名称" align="center" />

        <!-- 排序号 -->
        <el-table-column prop="id" label="排序号" align="center" />

        <!-- 描述 -->
        <el-table-column prop="description" label="描述" align="left" />

        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              @click="editCategory(scope.row)"
            >
              编辑
            </el-button>

            <el-button
              size="small"
              type="danger"
              @click="deleteCategory(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部内容 -->
    <div class="footer" />

    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      heigth="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="categoryFormDate"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="栏目名称" prop="name">
            <el-input v-model="categoryFormDate.name" />
          </el-form-item>

          <el-form-item label="序号" prop="no">
            <el-input v-model="categoryFormDate.no" />
          </el-form-item>

          <el-form-item label="栏目介绍" prop="description">
            <el-input v-model="categoryFormDate.description" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose()">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      // 模态框标题
      dialogTitle: "",
      // 模态框 状态
      dialogVisible: false,

      // 模态框  表单数据
      categoryFormDate: {
        name: "",
        no: "",
        description: "",
      },
      // 全部资讯数据
      allCategoryData: [],

      // 表单验证
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.getAllCategory();
  },
  mounted() {},
  methods: {
    // 获取全部资讯
    async getAllCategory() {
      const res = await get("/category/findAll");
      this.allCategoryData = res.data;
    },

    // 新增 资讯
    addCategory() {
      this.dialogTitle = "新增栏目信息";
      this.dialogVisible = true;
      this.categoryFormDate = {};
    },

    // 编辑按钮
    editCategory(res) {
      this.dialogTitle = "编辑栏目";
      this.dialogVisible = true;
      this.categoryFormDate = { ...res };
    },

    // 删除按钮
    async deleteCategory(res) {
      let flag = 1;
      this.$confirm("此操作将永久删除该资讯, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          flag = 0;
          const data = await get("/category/deleteById", { id: res.id });

          console.log(data);
          if (data.status == 200) {
            this.$message({
              type: "success",
              message: data.message,
            });

            // 关闭模态框 并清空表单数据
            this.dialogClose();
            // 重新加载全部数据
            this.getAllCategory();
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
             // 关闭模态框 并清空表单数据
            this.dialogClose();
            // 重新加载全部数据
            this.getAllCategory();
          }
        })
        .catch(() => {
          if (flag == 1) {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          }
        });
    },

    // 模态框关闭按钮
    handleClose(done) {
      this.$refs["ruleForm"].resetFields();
      done();
    },

    // 关闭模态框 调用表单重置的方法
    dialogClose() {
      // 重置表单
      this.$refs["ruleForm"].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },

    // 确定按钮
    async dialogSubmit() {
      // console.log(this.carouselFormData);
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          // 提交数据
          const res = await post(
            "/category/saveOrUpdate",
            this.categoryFormDate
          );
          // console.log(res);
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 关闭模态框 并清空表单数据
            this.dialogClose();
            // 重新加载全部数据
            this.getAllCategory();
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
</style>
